<!doctype html>
<html lang="en" class="theme-default typo-default">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<meta name="theme-color" content="#ff3e00" />

		<link rel="manifest" href="/manifest.json" />
		<link rel="icon" type="image/png" href="/favicon.png" />

		<meta name="twitter:site" content="@sveltejs" />
		<meta name="twitter:creator" content="@sveltejs" />

		<link
			rel="search"
			type="application/opensearchdescription+xml"
			href="/opensearch.xml"
			title="Svelte"
		/>

		<script>
			document.documentElement.classList.add(
				`font-${localStorage.getItem('svelte:font') ?? 'elegant'}`
			);
		</script>

		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<script>
			{
				const div = document.createElement('div');

				Object.assign(div.style, {
					width: '100px',
					height: '100px',
					overflow: 'scroll',
					position: 'absolute',
					top: '-9999px'
				});

				document.body.append(div);

				document.documentElement.classList.add(
					div.offsetWidth - div.clientWidth > 0 ? 'scrollbars-visible' : 'scrollbars-invisible'
				);

				div.remove();
			}
		</script>

		<div style="height: 100%">%sveltekit.body%</div>

		<script>
			if (localStorage.getItem('svelte:show-legacy') !== 'false') {
				for (const node of document.querySelectorAll('details.legacy')) {
					node.open = true;
				}
			}

			if (localStorage.getItem('svelte:prefers-ts') === 'false') {
				for (const node of document.querySelectorAll('.ts-toggle')) {
					node.checked = false;
				}
			}
		</script>
	</body>
</html>
